<template>
    <div class="Login">
        <div class="Login_box">
            <div class="fl Login_fl">
                <h1 class="Login_title">欢迎来到<br/>易采批</h1>
                <h2 class="Login_subtitle">你身边的采购专家</h2>
            </div>
            <div class="fr Login_fr">
                <div class="Login_header">
                    <nuxt-link class="Login_header_text" to="/login/">登录</nuxt-link>
                    <span class="Login_header_divide">/</span>
                    <nuxt-link class="Login_header_text Login_header_cur" to="/register/">注册</nuxt-link>
                </div>
                <div class="Login_form">
                  <div class="Login_form_group">
                    <div class="Login_form_group_div">
                      <label class="Login_form_label">请输入手机号</label>
                      <button class="Login_form_getCode fr" :data-validate="errors.has('mobile')" v-timer @click="sendSemCode">获取动态码</button>
                    </div>
                    <input
                    :class="{'Login_form_input_danger':errors.has('mobile')}"
                    v-validate="{required: true, max: 11, min: 11, regex: isMobile}"
                    class="Login_form_input"
                    v-model="mobile" name="mobile" maxlength="11" type="tel"/>
                    <p class="Login_form_tip" v-show="errors.has('mobile')">{{ errors.first('mobile') }}</p>
                  </div>
                  <div class="Login_form_group">
                    <div class="Login_form_div">
                      <label class="Login_form_label">请输入动态码</label>
                    </div>
                    <input
                    :class="{'Login_form_input_danger':errors.has('code')}"
                    v-validate="'required|max:4|min:4'"
                    maxlength="4" v-model="code"
                    type="text" name="code" class="Login_form_input"/>
                    <p class="Login_form_tip" v-show="errors.has('code')">{{ errors.first('code') }}</p>
                  </div>
                  <div class="Login_form_group">
                    <div class="Login_form_div">
                      <label class="Login_form_label">请输入密码</label>
                    </div>
                      <input
                        :class="{'Login_form_input_danger':errors.has('pwd')}"
                        class="Login_form_input"
                        v-validate="'required|max:16|min:6'"
                        maxlength="16"
                        v-model="pwd"
                        name="pwd"
                        type="password"/>
                      <p class="Login_form_tip" v-show="errors.has('pwd')">{{ errors.first('pwd') }}</p>
                  </div>
                  <button
                    @click="doSubmit"
                    :disabled="errors.has('mobile')||errors.has('code')||errors.has('pwd')"
                    class="Login_form_getCode fr">
                    <img src="~/static/images/login/button_normal.png" alt="" class="rotate_arrow">
                  </button>
                  <!-- <nuxt-link to="/qualified/">
                    <img src="~/static/images/login/button_normal.png" alt="" class="rotate_arrow fr">
                  </nuxt-link> -->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import { isMobile } from "~/utils/regx"
  import { sendSmsCode, register } from "~/api/";
  export default {
    data() {
      return {
        isMobile,
        mobile: "",
        code: "",
        pwd: ""
      }
    },
    methods: {
      sendSemCode () {
        this.$validator.validate('mobile').then(async (result) => {
          if (!result) return
          const res = await sendSmsCode(this, 'REGISTER', this.mobile)
          if (res.code === '0') {
            this.$message.success('验证码发送成功')
          } else {
            this.$message.error(res.message)
          }
        })
      },
      doSubmit() {
        this.$validator.validateAll().then( async (result) => {
          if (!result) return
          const res = await register(this, this.mobile, this.code, this.pwd)
          if (res.code === '0') {
            this.$store.dispatch('setLoginStatus', this.mobile)
            this.$message.success('注册成功')
            this.$router.push('/qualified/')
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
.rotate_arrow {
  vertical-align: middle;
}
</style>
